import React, { createRef, useEffect, useState } from "react";
import { Space, Input } from "antd";
import QRCode from "qrcode";
import "./index.css";

const { TextArea } = Input;

export default () => {
	const can = createRef();

	const [content, setContent] = useState("hello world");

	useEffect(() => {
		if (content !== "") {
			QRCode.toCanvas(can.current, content, function (error) {
				if (error) console.error(error);
				console.log("二维码生成成功");
			});
		}
	}, [content]);

	return (
		<div className="qr-code">
			<Space direction="vertical" style={{ alignItems: "center" }}>
				<TextArea
					placeholder="请输入内容"
					value={content}
					autoSize={{ minRows: 1, maxRows: 5 }}
					onChange={({ target: { value } }) => {
						setContent(value);
					}}
				/>
				<canvas ref={can}></canvas>
			</Space>
		</div>
	);
};
